import React, {
  useState, memo, useEffect,
} from 'react';
import {
  Drawer, Form, Button, Col, Row, Input, Select, DatePicker,
} from 'antd';
import moment from 'moment';
import { isFunction } from 'lodash';
import { updateArticleById } from '../../../api/actions/article';

const { Option } = Select;

function EditDrawer(props) {
  const {
    data, onFinish, onClose, visible,
  } = props;

  const [form] = Form.useForm();

  const [_visible, set_visible] = useState(false);

  const handleClose = () => {
    set_visible(false);
    if (isFunction(onClose)) {
      onClose();
    }
  };

  const handleFinish = async (d) => {
    const id = data._id;
    const res = await updateArticleById({
      id,
      ...d,
    });
    if (res.code === 0) {
      set_visible(false);
      if (isFunction(onFinish)) {
        onFinish(d);
      }
    }
  };

  useEffect(() => {
    if (data) {
      const normalize = data ? {
        ...data,
        time: data.time && moment(data.time),
        lastModify: data.lastModify && moment(data.lastModify),
      } : undefined;

      form.setFieldsValue(normalize);
    }
  }, [data]);

  return (
    <>
      <Drawer
        title="Create a new account"
        width={420}
        onClose={handleClose}
        visible={visible === undefined ? _visible : visible}
        bodyStyle={{ paddingBottom: 80 }}
      >
        <Form layout="vertical" hideRequiredMark form={form} onFinish={handleFinish}>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="title"
                label="文章标题"
              >
                <Input placeholder="请输入文章标题" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="author"
                label="作者标识"
              >
                <Input
                  disabled
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="banner"
                label="Banner图"
              >
                <Input style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="type"
                label="文章类型"
              >
                <Select>
                  <Option value="backend">后端</Option>
                  <Option value="frontend">前端</Option>
                  <Option value="android">Android</Option>
                  <Option value="ios">iOS</Option>
                  <Option value="ai">人工智能</Option>
                  <Option value="freebie">开发工具</Option>
                  <Option value="career">代码人生</Option>
                  <Option value="article">阅读</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="status"
                label="文章状态"
              >
                <Select>
                  <Option value={-1}>删除</Option>
                  <Option value={0}>草稿</Option>
                  <Option value={1}>审核中</Option>
                  <Option value={2}>已发布</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="recommend"
                label="是否推荐"
              >
                <Select>
                  <Option value={0}>不推荐</Option>
                  <Option value={1}>普通推荐</Option>
                  <Option value={2}>强力推荐</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="lastModify"
                label="最后修改时间"
                rules={[{ required: true, message: 'Please select an owner' }]}
              >
                <DatePicker placeholder="修改时间" format="YYYY-MM-DD HH:mm" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="time"
                label="创建时间"
                rules={[{ required: true, message: 'Please select an owner' }]}
              >
                <DatePicker placeholder="创建时间" format="YYYY-MM-DD HH:mm" />
              </Form.Item>
            </Col>
            <Col offset={18} span={2}>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
}

export default memo(EditDrawer);
